<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 条件筛选 -->
    <van-tabs :animated="true" @disabled="onClickDisabled">
        <van-tab title="综合">
          <van-list
            v-model="loading"
            :finished="finished"
            :immediate-check="false"
            finished-text="我是有底线滴"
            @load="loadMore"
          >
      <van-card
        v-for="prod in products"
        :key="prod.id"
        :price="prod.price | money"
        :desc="prod.title"
        :title="prod.title"
        :thumb="prod.image"
        :origin-price="prod.originPrice | money"
        currency="￥"
        @click="handleJumpToDetail(prod.id)"
      >
        <template v-slot:num>
          <span>月销量: {{ prod.saleNum }}</span>
          <van-icon name="cart-circle-o" size="18px" color="#f00" @click.stop="handleAddToCart(prod)" />
        </template>
        <template #tags>
          <van-tag color="#f00" plain v-if="prod.isFreePostage">包邮</van-tag>
          <van-tag color="#7232dd" plain v-if="prod.couponValue">{{ prod.couponValue }}</van-tag>
        </template>
      </van-card>
    </van-list>
        </van-tab>
        <van-tab title="销量" disabled></van-tab>
        <van-tab title="价格" disabled></van-tab>
        <van-tab title="筛选"  disabled></van-tab>
      </van-tabs>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Toast } from 'vant'
import { getCategories } from '@/api/category'
import { getProductsList } from '@/api/product'
import { getHomeData } from '@/api/home'
export default {
  name: 'Search',
  data() {
    return {
      // imgSrc: '../../assets/elm.png',
      products: [], // 推荐商品的数组

    }
  },
  setup() {
    const value = ref('')
    const onSearch = (val) => Toast(val)
    return {
      value,
      onSearch,
    }
  },
  created() {
    getCategories()
      .then(data => {
        // 获取到数据，处理
        this.categories = data.list
      })
      .catch(err => console.error('err:', err))
    getHomeData()
      .then(data => {
        // console.log('设置轮播图数据......')
        this.banners = data.banners
        // 推荐商品的数据
        this.products = data.items.list
        this.nextIndex = data.items.nextIndex
        this.finished = data.items.isEnd
      })

      .catch(console.error)
  },
  methods: {
    loadMore() {
      // console.log('load more...')
      // 发送网络请求，查询更多数据
      getProductsList(1, this.nextIndex)
        .then(data => {
          console.log('加载更多：', data)
          // 修改数据
          this.products = [
            ...this.products,
            ...data.list,
          ]
          this.nextIndex = data.nextIndex
          this.finished = data.isEnd
          // 将 loading 设置为 false
          this.loading = false
        })
        .catch(console.error)
    },
    onCancel() {
      this.$router.push('/home')
    },
  },
}
</script>

<style lang="less" scoped>

</style>
